Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <button id='pause' aria-pressed="false">Pause Animation</button>

<div class='wrapper'>
	<div class='left'>
		<div class='marquee'>
			<div class='marquee--inner'>
				<p style='filter: url(#duplicate) url(#marquee-left);'>Sip, smile, repeat</p>
			</div>
		</div>
		<div class='marquee'>
			<div class='marquee--inner'>
				<p class='outline' style='filter: url(#duplicate) url(#marquee-right);'>Taste the sparkle</p>
			</div>
		</div>
	</div>
	<div class='right'>
		<div class='marquee'>
			<div class='marquee--inner'>
				<p class='outline' style='filter: url(#duplicate) url(#marquee-left);'>Sip, smile, repeat</p>
			</div>
		</div>
		<div class='marquee'>
			<div class='marquee--inner'>
				<p style='filter: url(#duplicate) url(#marquee-right);'>Taste the sparkle</p>
			</div>
		</div>
	</div>
	
	<svg role='img' class='can' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 681 1271">
		<path d="M669 1062c8 22 3 48-14 66a74 74 0 0 1-2 38c-7 30-42 38-66 49-12 5-23 11-35 15-26 11-56 16-85 16-9 11-23 8-36 8l-22 1h-11c-32 17-70 10-104 3-14 4-22 3-36 2h15v1l-9 1-8-1c-16-3-35-8-51-10-8-1-27-2-35-4-14-4-27-12-41-13-28 0-65-1-85-24-7-8-12-21-15-31-3-12-4-27-4-39-3-13-12-23-14-37-3-27 0-54 2-81l1-25c-2-8-4-16-4-25V278l1-9c-2-18 4-35 15-48 2-10 12-19 18-26 7-18 15-36 31-47 0-7 2-14 7-19-2-5-4-13-4-18 1-6 5-11 10-15 14-10 33-13 49-20a21119 21119 0 0 0-19-18c-22-4-25-45 0-49l39-1c19 1 40 1 58 7 15 5 27 11 40 18l19 15 7 8c13-10 30-7 45-7 14-1 28-3 42 1 11-2 21-1 32 0l46 1c26 1 55-1 79 11-11-6 25 9 38 13 15-1 32 2 41 15 8 10 3 23-2 33-1 2-3 5-6 6 15 10 19 25 25 40 11 9 17 17 20 30 4 6 8 9 11 15 18 16 25 41 24 64-1 19-4 26-7 44-2 20 1 40 1 60v667l-1 13Zm-346 184c7 6 14 9 22 13h3v-1l-2-1-5-2-18-9Zm-116 5h5-5ZM14 1018v-3 3Zm223 237h-1 1Zm27 1-9 1h-3l12-1Z" style="fill:#fff"/>
		<path d="M120 4c-22 5-30 7-34 13-5 6-5 7 2 15 4 5 7 10 7 12l13 11 12 9-18 8c-45 20-46 47-5 68 39 19 115 30 228 32 116 2 198-6 249-24l20-8 7 8 14 20c9 18 23 38 36 52 14 14 15 13-22 27-39 16-112 32-184 40-46 5-164 7-213 3-98-8-179-28-204-52l-7-6 22-30c33-47 42-62 38-66-5-4-18 9-50 54-13 17-25 31-27 32-4 1-4 57-4 453l1 451 10 14c7 10 9 16 8 21-4 14 1 29 14 43 39 41 148 67 289 67 142 0 265-27 311-68 15-14 20-25 20-41 0-10 2-15 8-20 4-4 9-11 11-16l6-16c2-5 3-66 1-195a71305 71305 0 0 1-5-688c-3 0-29-38-41-61l-18-28c-6-5-6-5 1-14 20-23 3-43-48-59-54-17-130-24-230-24l-68 1-14-13C232 8 215 2 179 0c-22-1-39 1-59 4m97 19c11 6 27 18 44 34a589 589 0 0 0 53 47c0 1-8 3-18 4l-38 7-19 4-10-9c-6-5-22-15-37-23-42-23-78-46-85-55l-6-9 10-2c31-5 45-6 65-7 19 0 25 1 41 9m-70 6c-12 5-9 12 13 26 20 13 51 23 62 20 11-2 16-11 12-19-5-9-21-21-33-24-17-5-46-6-54-3m59 15c27 14 31 23 9 24-10 1-38-12-54-24l-7-6h20c15 0 24 2 32 6m237 15c90 8 162 28 165 47 2 12-25 25-76 36-90 21-247 25-345 8-43-7-91-24-100-35-6-7-1-14 19-23 30-15 34-15 74 3l41 20c7 3 6 3-7 4-22 0-78-6-80-9-2-1 8-4 22-6l25-4-10-4c-17-7-58 2-58 12 0 12 25 18 92 23 82 7 308-1 344-12 9-3 11-5 11-10 0-4-1-9-3-10-12-10-78-16-172-16h-69l-14-12c-11-10-12-12-6-12 3 0 7-2 8-4 3-3 78-1 139 4M241 76c-14 4-17 13-8 24l6 7 21-5c12-3 21-6 21-8l-11-11c-10-9-16-10-29-7m23 10c5 6 5 6-2 9-12 4-21 3-25-3-3-5-3-6 6-9 14-4 16-4 21 3m224 12c20 2 40 4 45 6 7 2 6 2-9 5-39 9-96 13-96 7 0-1-7-6-16-9-13-5-24-6-46-6s-31-1-35-5c-5-4 0-4 57-3l100 5m-87 20a981 981 0 0 1-106 4l-18-1 21-4c24-4 92-3 103 1m261 558c0 413 0 432-5 444-17 37-96 69-212 85-41 6-165 5-212-1-48-7-100-19-130-29-47-18-79-42-79-62l-5-14c-4-8-5-62-5-430V248l17 10c31 19 96 36 172 44 44 5 179 5 228 0 50-5 101-13 139-23a356 356 0 0 0 90-34c1 0 2 194 2 431m-26 498c-3 15-43 37-98 53-134 39-353 32-451-13-25-12-38-22-44-33-3-5-4-9-3-9l14 7c40 23 119 46 183 55 44 6 137 6 182 1 41-5 98-16 130-26a405 405 0 0 0 88-43l-1 8" fill='#2a899b'/>
	</svg>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
#pause {
	border: 2px solid #2a899b;
	background: #fff;
	color: #2a899b;
	font-weight: bold;
	font-size: 1rem;
	padding: 10px 20px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 10;
	
	&[aria-pressed='true'] {
		background: #2a899b;
		color: #fff;
	}
}

.marquee {	
	font-size: clamp(4rem,20vw,7rem);
	letter-spacing: 0.05em;
	overflow: hidden;
	font-family: "Lilita One", sans-serif;
	text-transform: uppercase;

.marquee--inner {
		width: max-content;
	}
	
	p {
		color: red;
		background: black;
		display: flex;
		align-items: center;
		gap: 0.35em;
		
		&.outline {
			color: black;
			-webkit-text-stroke: 0.05em red;
		}
		
		&:before {
			content: '';
			z-index: 1;
		}
		&:after {
			content: '';
			mask-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' style='fill-rule:evenodd;' viewBox='0 0 30 30'%3E%3Cpath d='M15 0C6.721 0 0 6.721 0 15s6.721 15 15 15 15-6.721 15-15S23.279 0 15 0ZM8.87 14h-.013a3.868 3.868 0 0 0-1.724.406 3.875 3.875 0 0 0-2.125 3.204l-.004.477c.042.485.189.953.461 1.4 1.84 3.487 5.492 5.863 9.693 5.863 4.211 0 7.872-2.389 9.707-5.89a1.001 1.001 0 0 0-1.772-.928c-1.5 2.862-4.492 4.818-7.935 4.818a8.887 8.887 0 0 1-4.429-1.176 14.461 14.461 0 0 0 1.406-2.282c.355-.74.572-1.463.579-2.02v-.027a3.832 3.832 0 0 0-.896-2.459 3.909 3.909 0 0 0-1.449-1.078A3.816 3.816 0 0 0 8.87 14ZM19 11c0-.551.444-1 .992-1 .549 0 .992.449.992 1a1.001 1.001 0 0 0 2 0c0-1.657-1.341-3-2.992-3A2.997 2.997 0 0 0 17 11a1 1 0 0 0 2 0ZM9 11c0-.551.444-1 .992-1 .549 0 .992.449.992 1a1.001 1.001 0 0 0 2 0c0-1.657-1.341-3-2.992-3A2.997 2.997 0 0 0 7 11a1 1 0 0 0 2 0Z'/%3E%3C/svg%3E");
			mask-repeat: no-repeat;
			width: 0.65em;
			aspect-ratio: 1;
			background: red;
		}
	}
}

.wrapper {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	align-items: center;
}

.left {
	grid-area: 1/1/-1/2;
}

.right {
	grid-area: 1/2/-1/3;
}

.can {
	grid-area: 1/1/-1/-1;
	width: 50vw;
	max-width: 300px;
	margin-inline: auto;
	position: relative;
}

.bg {
	grid-area: 1/1/-1/-1;
	max-width: 700px;
	margin-inline: auto;
	position: relative;
	z-index: -1;
}

* {
	margin: 0;
}

body,html {
	height: 100%;
}

body {
	display: grid;
}

Frontend Forever App